<template>
	<view class="facility">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="search-wrap">
			<view class="ipt-con-wrap">
				<view class="ipt-con">
					<input type="text" placeholder="设施编号" v-model="params.devicecode"
						placeholder-style="font-weight: 400;font-size: 25rpx;color: #666666;" />
					<button @click="getList">搜索</button>
				</view>
			</view>
			<view class="sel-wrap">
				<uni-data-select placeholder="设备类型" v-model="params.devicetype" :localdata="adviceTypeList"
					:clear="true"></uni-data-select>
				<uni-data-select placeholder="设施状态" class="two" v-model="params.status" :localdata="adviceStatusList"
					:clear="true"></uni-data-select>
				<!-- 		<uni-data-select placeholder="安装位置" class="two" v-model="selVal" :localdata="range" @change="selChange"
					:clear="true"></uni-data-select> -->
			</view>


		</view>
		<view class="btm-wrap">

			<view class="list-content">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id">
					<image class="img"
						src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
						mode=""></image>
					<view class="title-name">
						<view class="name">设施名称：{{item.devicename}}</view>

					</view>
					<view class="detail">
						<view class="one-line">
							<view>
								设施编号：{{item.devicecode }}
							</view>
							<view>
								更换周期：{{item.recircledays}}天
							</view>
						</view>
						<view class="two-line">
							<view>
								设施状态：<text>{{item.status==2?'停用':'启动'}}</text>
							</view>
							<view>
								安装位置：{{item.installposition}}
							</view>
						</view>
						<view class="three-line">
							预计下次更换时间：{{item.nextchangeday?.split(' ')[0] || '无'}}
						</view>
						<view class="four-line">
							<button class="change" @click="change(item.devicename,item.devicecode)">更换</button>
							<button class="record" @click="record(item.devicecode)">记录</button>
							<button class="serve" @click="serve">服务</button>
						</view>
					</view>
				</view>





			</view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index.js'
	import {
		ref,
		reactive
	} from 'vue'
	let name = "耗材替换"
	let params = reactive({})
	let selVal = ref('0')
	let adviceTypeList = ref([])
	let adviceStatusList = ref([])
	let dataList = ref([])


	let search = () => {

	}
	let change = (name, code) => {
		uni.navigateTo({
			url: `/homePageOther/trashChange/trashChange?name=${name}&code=${code}`
		})
	}
	let record = (id) => {
		uni.navigateTo({
			url: `/homePageOther/trashRecord/trashRecord?id=${id}`
		})
	}
	let serve = () => {
		uni.navigateTo({
			url: "/homePageOther/pollutionabatement/pollutionabatement"
		})
	}
	let getList = () => {
		http({
			url: '/device/datalist',
			data: params

		}).then((res) => {
			console.log(res, 'res');
			if (res.code == 0) {
				dataList.value = res.data.list
			}
		})
	}
	getList()
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B02'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceStatusList.value = data.map((item) => {
				if (item.id == 2) {
					return {
						text: item.name,
						value: item.id
					}
				} else {
					return {
						text: item.name,
						value: 0
					}
				}

			})
		}

	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
</script>

<style lang="scss" scoped>
	.facility {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.btm-wrap {
			background-color: #F3F5F7;
			height: calc(100vh - 160rpx - 192rpx);
			width: 100vw;
			padding-top: 15rpx;


			.list-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow-y: scroll;
				height: calc(100vh - 160rpx - 192rpx - 56rpx);
				padding-bottom: 22rpx;

				.item {
					width: 690rpx;
					height: 440rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					padding: 0 39rpx 0 27rpx;
					margin-top: 27rpx;
					position: relative;

					.img {
						position: absolute;
						width: 100%;
						height: 25rpx;
						top: 82rpx;
						left: 0;
					}

					.title-name {
						display: flex;
						align-items: center;
						height: 94rpx;
						justify-content: space-between;

						.name {

							font-weight: 500;
							font-size: 31rpx;
							color: #333333;

						}

					}

					.detail {
						height: 344rpx;
						padding-top: 36rpx;
						padding-bottom: 42rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.one-line,
						.two-line,
						.three-line {
							display: flex;
							justify-content: space-between;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;


						}

						.four-line {
							display: flex;
							justify-content: space-between;

							button {
								margin: 0;
							}

							.change {
								width: 163rpx;
								height: 55rpx;
								background: #DCEBFE;
								border-radius: 27rpx;


								font-weight: 500;
								font-size: 28rpx;
								color: #0874FA;
								line-height: 55rpx;
							}

							.record {
								width: 163rpx;
								height: 55rpx;
								background: #D2F7E6;
								border-radius: 27rpx;

								font-weight: 500;
								font-size: 28rpx;
								color: #369E64;
								line-height: 55rpx;

							}

							.serve {
								width: 163rpx;
								height: 55rpx;
								background: #FEF3DC;
								border-radius: 27rpx;


								font-weight: 500;
								font-size: 28rpx;
								color: #EA980A;
								line-height: 55rpx;

							}
						}
					}
				}

				.item:first-child {
					margin-top: 0;
				}
			}
		}

		.search-wrap {
			display: flex;
			padding: 30rpx 30rpx 0rpx 30rpx;

			flex-direction: column;
			height: 192rpx;

			.sel-wrap {
				width: 100%;
				height: 100%;
				display: flex;
				flex: 1;
				align-items: center;


				:deep(.uni-select) {
					border: none;
					width: 180rpx;

				}

				:deep(.uni-select__input-text, .uni-select__input-placeholder) {
					font-weight: 400 !important;
					font-size: 28rpx !important;
					color: #333333 !important;
				}

				:deep(.uni-icons, .uniui-clear) {
					font-size: 32rpx !important;
				}

				.two {
					margin-left: 80rpx !important;
				}
			}

			.ipt-con-wrap {
				display: flex;
				justify-content: center;
				width: 100%;

				.ipt-con {
					width: 100%;
					height: 74rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					border: 1px solid #E5E5E5;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 0rpx 0 25rpx;

					input {
						width: 100%;
						height: 100%;
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}

				button {
					width: 133rpx;
					height: 74rpx;
					background: #0874FA;
					// border-top-right-radius: 14rpx;
					// border-bottom-right-radius: 14rpx;
					margin: 0;

					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;

				}
			}
		}

	}
</style>